Vue3的setup及常用Composition API和新组件 |
您所在的位置：网站首页 › vue3中v model › Vue3的setup及常用Composition API和新组件 |
Vue3的setup及常用Composition API和新组件
|
入口函数
vue3与vue2相比，不再使用构造函数创建实例对象，且实例对象app比vm更轻。 // main.js // 引入createApp工厂函数 import {createApp} from 'vue' import App from './App.vue' // 创建应用实例对象app const app = createApp(App) // 挂载 app.mount('#app') 复制代码 setupsetup是vue3的一个新配置项，组件中所用到的数据、方法都得配置在setup中。 setup的返回值 返回一个对象：对象中的属性和方法在模板中均可以直接使用 返回一个渲染函数：可以自定义渲染内容 name:{{name}} age:{{age}} // 如果要返回渲染函数需要引入h函数 import {h} from 'vue' export default{ name: 'App', // data(){...}, // methods: {} setup(){ let name = 'zhangsan' let age = 18 function sayHello(){ alert(`我是${name}，我${age}岁了`) } // 返回对象 return { name, age, sayHello } // 返回渲染函数 return () => { return h('h1', 'zhangsan') } } } 复制代码 setup的参数setup接受props、context两个参数 props：是一个对象，包含组件外部传递过来且组件内部声明接收了的属性 context：上下文对象 attrs：对象，包含组件外部传递过来但组件内部没有用props声明接受的属性，相当于this.$attrs slots：收到的插槽内容，相当于this.$slots emit：分发自定义事件的函数，相当于this.$emit 注意点 尽量不要与vue2的配置混用：vue2配置可以访问到setup中的属性和方法，但在setup中不能访问到；如果vue2配置属性和setup的属性重名，优先显示setup setup不能是一个async函数，因为返回值是被promise包裹的对象，此时模板拿不到里面的属性 setup在beforeCreate之前执行，且this为undefined 常用Composition API 自定义hook函数hook本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2中的mixin；它可以复用代码，让setup更简洁。 toRef用于创建一个ref对象，其value值指向另一个对象中的某个属性，可以将响应式对象中的某个属性单独提供给外部使用。 姓名:{{ name }} // ... setup(){ let person = { name: 'zs', age: 18, job: { j1: { salary: 20 } } } // const name = toRef(person, 'name') return { name: toRef(person, 'name'), salary: toRef(person.job.j1, 'salary') // toRef是引用，内部通过get读取到person属性 // ref是复制，当name在外部被修改时，person的name并不会被改变 // name: ref(person.name) } } 复制代码toRefs与toRef功能一致，但可以批量创建多个ref对象 return { ...toRefs(person) } 复制代码 其他Composition API shallowReactive和shallowRefshallowReactive只处理对象最外层属性的响应式（浅响应式）。 应用场景：如果有一个对象数据结构比较深，但变化时只是最外层属性改变。 const person = shallowReactive({ // 只会响应name和age属性 name: 'zs, age: 18, job:{ j1:{ salary:20 } } }) 复制代码shallowRef只处理基本数据类型的响应式，不进行对象的响应式处理。 应用场景：如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换。 {{ x.y }} 替换 x.y++ // 不生效 //... const x = shallowRef({ y: 0 }) 复制代码 readonly和shallowReadonlyreadonly和shallowReadonly可以让一个响应式数据变为只读的，前者为深只读，后者为浅只读（里层属性可修改）。 应用场景：不希望数据被修改。 person = readonly(person) person = shallowReadonly(person) // 可修改salary return { ...toRefs(person) } 复制代码 toRaw和markRawtoRaw可以将一个由reactive生成的响应式对象转为普通对象。 应用场景：用于读取响应式转化后的普通对象，对该普通对象的所有操作都不会引起页面更新（数据会被修改）。 let obj = reactive({ name:'奔驰', price: 20 }) function objRaw(){ let obj1 = toRow(obj) console.log(obj) // Proxy {name:'奔驰', price: 20} console.log(obj1) // {name:'奔驰', price: 20} } 复制代码markRaw标记一个对象，使其永远不会成为响应式对象。 应用场景： 有些值不应被设为响应式，如复杂的第三方类库 当渲染具有不可变数据源的大列表时，跳过响应式转化可以提高性能 let person = reactive({ name: 'zs', age:20 }) let car = {name: '奥迪', price: 100} person.car = markRaw(car) // 把car先变成不可响应的数据，然后再放到响应式数据中 复制代码 customRefcustomRef可以创建一个自定义ref，并对其依赖的数据源进行跟踪及更新触发。它接收track和trigger函数，用于追踪依赖源和更新触发页面。 {{ keyword }} // ... import {customRef} from 'vue' export default { setup () { function myRef (value, delay) { return customRef((track, trigger)=>{ return { // 从myRef容器中读取数据 get () { track() // 追踪最新value return value // 首先是myRef接收的value }, // 在myRef容器中修改数据 set (newValue) { cleatTimeout(timer) // 防抖 timer = setTimeou(()=>{ value = newValue trigger() // 提醒vue数据变化，页面需要重新解析渲染 }, delay) } } }) } } // let keyWord - ref('Hello') 使用vue提供的ref let keyWord = myRef('Hello', 1000) // 使用自定义ref return {keyWord} } 复制代码 页面初始化时，keyWord的值为Hello 当输入框修改keyWord的值时，set会调用trigger()触发页面重新解析渲染 v-model和插值语法会向get读取keyWord的值 此时get会调用track()追踪keyWord的最新值并渲染到页面上 provide和inject两者结合可以实现祖与后代组件间通信，父组件通过provide提供数据，后代组件通过inject接收数据。 // 父组件 import {provide} from 'vue' provide('car', car) // provide('数据名', 数据) 复制代码 // 后代组件 import {inject} from 'vue' const car = inject('car') return {car} 复制代码 响应式数据的判断 isRef检查一个值是否为ref对象 isReactive检查一个对象是否是由reactive创建的响应式代理 isReadonly检查一个对象是否是由readonly创建的只读代理 isProxy检查一个对象是否是由reactive或者readonly创建的代理 一些新组件 TeleportTeleport可以将一个组件结构移动到指定位置的技术。 // 移动位置可以是html、body或其他结构 |
【本文地址】